<!-- 生产排产 -->
<script lang="ts">
export default {
  name: "schedule"
};
</script>
<script setup lang="ts">
import { reactive, ref, nextTick, onMounted } from "vue";
import { changeHeight } from "/@/utils/public.mixin";
import { VXETable, VxeTableInstance, VxeFormInstance } from "vxe-table";
import {
  queryProductOrderPageForPlanTask,
  addPlanTask,
  updatePlanTask,
  relasePlanTask,
  toOutSourceTask,
  queryPlanTaskHis,
  getPlanTasksDetail,
  queryPlanTaskListWithProdOrder,
  downloadProductionSchedulingData,
  downloadReportData
} from "/@/api/prm/schedule";
import { dateFormatYMD } from "/@/utils/date";
import { queryTeamAll } from "/@/api/basic/team";
import { dateFormatYM } from "/@/utils/date";
import { ElForm, ElTable } from "element-plus";
import { successMessage, errorMessage, warnMessage } from "/@/utils/message";
import { getProcessAll } from "/@/api/basic/workprocedure";
import { queryDeviceAll } from "/@/api/basic/producivity";
import { useRoute } from "vue-router";

const route = useRoute();
const routeName = route.name as string;

const table = reactive({
  loading: false,
  tableData: [] as any[],
  deviceData: [] as any[],
  tableHeight: 0, //表格高度
  listQuery: {
    bnoNo: "",
    bomCode: "",
    bomName: "",
    endWorkdConfimDate: "",
    prodOrderNo: "" as any,
    taskNo: "",
    startWorkConfimDate: "",
    teamgroupName: "",
    date: "",
    planStatus: ""
  }
});

const page = reactive({
  pageNum: 1,
  pageRow: 20,
  totalResult: 0
});

const xTable = ref({} as VxeTableInstance);
const isRoute = ref(true);
const clearProductOrderNo = () => {
  isRoute.value = false;
};
// 查询
const searchEvent = () => {
  const data: any = {};
  if (route.params.prodOrderNo && isRoute.value) {
    table.listQuery.prodOrderNo = route.params.prodOrderNo;
  }
  Object.assign(data, table.listQuery);
  data.pageNum = page.pageNum;
  data.pageRow = page.pageRow;
  data.planStatus =
    data.planStatus === "" || data.planStatus == -1
      ? -1
      : table.listQuery.planStatus;
  if (table.listQuery.date) {
    data.startWorkConfimDate =
      dateFormatYMD(table.listQuery.date[0]) + " 00:00:00";
    data.endWorkdConfimDate =
      dateFormatYMD(table.listQuery.date[1]) + " 23:59:59";
  } else {
    data.startWorkConfimDate = "";
    data.endWorkdConfimDate = "";
  }
  table.loading = true;
  queryProductOrderPageForPlanTask(data).then((res: any) => {
    if (res.code === 0) {
      table.tableData = res.data.list;
      page.totalResult = res.data.total;
    }
    table.loading = false;
  });
};

// 分页发生改变时会触发该事件
const handlePageChange = ({ currentPage, pageSize }) => {
  page.pageNum = currentPage;
  page.pageRow = pageSize;
  searchEvent();
};

const detailData = reactive({
  loading: false,
  submitLoading: false,
  detailLoading: false,
  listQuery: {
    prodOrderNo: "",
    pageNum: 1,
    pageRow: 20
  },
  totalPage: 0,
  selectRow: null,
  showEdit: false,
  pickEdit: false,
  showFormData: {} as any
});
const detailTable = ref<InstanceType<typeof ElTable>>();

// 查看详情
const checkDetail = (prodOrderNo: any) => {
  detailData.listQuery.prodOrderNo = prodOrderNo;
  detailData.detailLoading = true;
  detailData.showEdit = true;
  queryPlanTaskListWithProdOrder(detailData.listQuery).then((res: any) => {
    console.log(res.data);
    if (res.code === 0) {
      detailData.detailLoading = false;
      detailData.showFormData = res.data;
      detailData.totalPage = res.data.totalPage;
    } else {
      errorMessage(res.message);
    }
  });
};
// 加载更多
const load = () => {
  if (detailData.listQuery.pageNum < detailData.totalPage) {
    detailData.listQuery.pageNum++;
    detailData.detailLoading = true;
    queryPlanTaskListWithProdOrder(detailData.listQuery).then((res: any) => {
      console.log(res.data);
      if (res.code === 0) {
        detailData.detailLoading = false;
        detailData.showFormData.planTaskList =
          detailData.showFormData.planTaskList.concat(res.data.planTaskList);
      } else {
        errorMessage(res.message);
      }
    });
  } else {
    warnMessage("数据已全部加载！");
  }
};
const detailClose = () => {
  nextTick(() => {
    detailData.showFormData = {} as any;
    detailData.detailLoading = false;
    detailData.showEdit = false;
    detailData.listQuery = {
      prodOrderNo: "",
      pageNum: 1,
      pageRow: 20
    };
    detailData.totalPage = 0;
  });
};
const procedure = reactive({
  submitLoading: false,
  filterName: "",
  selectRow: null,
  showEdit: false,
  processData: [] as any[],
  teamData: [] as any[],
  idsDo: {
    ids: []
  },
  totalCountOfMonth: 0,
  formData: {
    bnoNo: "",
    bomCode: "",
    bomName: "",
    day1: 0,
    day10: 0,
    day11: 0,
    day12: 0,
    day13: 0,
    day14: 0,
    day15: 0,
    day16: 0,
    day17: 0,
    day18: 0,
    day19: 0,
    day2: 0,
    day20: 0,
    day21: 0,
    day22: 0,
    day23: 0,
    day24: 0,
    day25: 0,
    day26: 0,
    day27: 0,
    day28: 0,
    day29: 0,
    day3: 0,
    day30: 0,
    day31: 0,
    day4: 0,
    day5: 0,
    day6: 0,
    day7: 0,
    day8: 0,
    day9: 0,
    id: 0,
    planMonth: "",
    planStatus: 0,
    processStepId: "",
    prodOrderNo: "",
    productDeptId: "",
    productDeptName: "",
    routeId: 0,
    taskNo: "",
    taskStatus: 0,
    deviceId: ""
  },
  dayNum: 31,
  mouthNum: 0,
  dayNowNum: new Date(Date.now()).getDate() - 1,
  monthNowNum: new Date(Date.now()).getMonth() + 1,
  formRules: {
    bnoNo: [{ required: true, trigger: "blur", message: "请输入订单编号" }],
    bomId: [{ required: true, trigger: "blur", message: "请输入品名" }],
    materialStatus: [
      { required: true, trigger: "blur", message: "请输入调整后完工日期" }
    ],
    useNum: [{ required: true, trigger: "blur", message: "请输入完工日期" }],
    processStepId: [
      { required: true, trigger: "blur", message: "请选择工序节点" }
    ],
    taskStatus: [
      { required: true, trigger: "blur", message: "请选择任务状态" }
    ],
    planStatus: [{ required: true, trigger: "blur", message: "请选择计划状态" }]
  },
  planStatu: [
    { label: "未下发", value: "2" },
    { label: "已下发", value: "4" }
  ]
});
const issueDisabled = ref(false);
// 下发
const issueEvent = async v => {
  const $table = xTable.value;
  const checkboxRecords = $table.getCheckboxRecords();
  if (checkboxRecords.length == 0) {
    errorMessage("请选择要下发的订单");
    return;
  }
  let temp = checkboxRecords.every(v => {
    if (v.planStatus == 2) {
      return true;
    } else {
      errorMessage("请选择未下发的订单下发");
      return false;
    }
  });
  var selectData = [];
  Object.keys(checkboxRecords).forEach(key => {
    if (checkboxRecords[key].bnoNo) {
      selectData.push(checkboxRecords[key].bnoNo);
    }
  });
  if (new Set(selectData).size != 1) {
    VXETable.modal.alert("请选择相同销售单下发");
    return false;
  }
  if (temp) {
    procedure.idsDo.ids = [];
    checkboxRecords.map(function (currentValue) {
      procedure.idsDo.ids.push(currentValue.id);
    });
    const type = await VXETable.modal.confirm("您确定要下发吗?");
    if (type !== "confirm") {
      return;
    }
    issueDisabled.value = true;
    relasePlanTask(procedure.idsDo)
      .then((res: any) => {
        if (res.code == 0) {
          searchEvent();
          successMessage("下发成功");
        } else {
          errorMessage("下发失败");
        }
        issueDisabled.value = false;
      })
      .catch(() => {
        issueDisabled.value = false;
      });
  }
};
// 转委外
const transferEvent = async v => {
  const $table = xTable.value;
  const checkboxRecords = $table.getCheckboxRecords();
  if (checkboxRecords.length == 0) {
    errorMessage("请选择要转委外的订单");
    return;
  }
  let temp = checkboxRecords.every(v => {
    if (v.planStatus != 5) {
      return true;
    } else {
      errorMessage("请选择未委外的订单委外");
      return false;
    }
  });
  if (temp) {
    const ids = ref([]);
    checkboxRecords.map(function (currentValue) {
      ids.value.push(currentValue.prodOrderNo);
    });
    const type = await VXETable.modal.confirm("您确定要转委外吗?");
    if (type !== "confirm") {
      return;
    }

    toOutSourceTask({ prodOrderNo: ids.value.join(",") }).then((res: any) => {
      if (res.code == 0) {
        searchEvent();
        successMessage("转委外成功");
      } else {
        errorMessage("转委外失败");
      }
    });
  }
};
// 新增
const insertEvent = () => {
  procedure.selectRow = null;
  procedure.showEdit = true;
  procedure.formData.planMonth = dateFormatYM(Date.now());
  checkDay(procedure.formData.planMonth);
};
// 修改-编辑
const editEvent = (row: any) => {
  console.log(row);
  procedure.totalCountOfMonth = row.totalCountOfMonth;
  getPlanTasksDetail(row.id).then((res: any) => {
    console.log(res);
    if (res.code === 0) {
      Object.keys(procedure.formData).forEach(key => {
        if (key.indexOf("day") != -1) {
          procedure.formData[key] = res.data[key] ? res.data[key] : 0;
        } else {
          procedure.formData[key] = res.data[key];
        }
      });
      procedure.selectRow = row;
      procedure.showEdit = true;
      checkDay(procedure.formData.planMonth);
    } else {
      errorMessage(res.message);
    }
  });
};

const insertForm = ref<InstanceType<typeof ElForm>>();
// 表单提交
const submitEvent = () => {
  insertForm.value.validate(valid => {
    if (valid) {
      procedure.formData.planMonth = dateFormatYM(procedure.formData.planMonth);
      var total = 0;
      Object.keys(procedure.formData).forEach(key => {
        if (key.indexOf("day") != -1) {
          total += procedure.formData[key];
        }
      });
      if (total > procedure.totalCountOfMonth) {
        errorMessage("当前计划数量总和大于合计数量，请核对数量");
        return false;
      }
      console.log(total, procedure.totalCountOfMonth);
      procedure.submitLoading = true;
      if (procedure.selectRow) {
        // 修改
        updatePlanTask(procedure.formData)
          .then((res: any) => {
            if (res.code === 0) {
              handleClose();
              checkDetail(detailData.listQuery.prodOrderNo);
              successMessage("保存成功");
            } else {
              errorMessage(res.message);
              procedure.submitLoading = false;
            }
          })
          .catch(() => {
            errorMessage("操作失败");
            procedure.submitLoading = false;
          });
      } else {
        // 新增
        addPlanTask(procedure.formData)
          .then((res: any) => {
            if (res.code === 0) {
              handleClose();
              searchEvent();
              successMessage("新增成功");
            } else {
              errorMessage(res.message);
              procedure.submitLoading = false;
            }
          })
          .catch(() => {
            errorMessage("操作失败");
            procedure.submitLoading = false;
          });
      }
    }
  });
};
// 查询所有设备
const queryDevice = () => {
  queryDeviceAll().then((res: any) => {
    if (res.code === 0) {
      table.deviceData = res.data;
    }
  });
};
// 获取所有工序
const getProcess = () => {
  getProcessAll().then((res: any) => {
    if (res.code === 0) {
      procedure.processData = res.data;
    }
  });
};
// 新增禁用月份
const disabledDate = (time: any) => {
  return time.getTime() <= Date.now() - 8.64e7;
};
// 获取所有班组
const getTeam = () => {
  queryTeamAll().then((res: any) => {
    if (res.code === 0) {
      procedure.teamData = res.data;
    }
  });
};
// 班组切换时 赋值班组名称
const teamChange = (id: any) => {
  procedure.formData.productDeptName = procedure.teamData.filter(
    item => item.id == id
  )[0].name;
};
const handleClose = () => {
  nextTick(() => {
    procedure.totalCountOfMonth = 0;
    procedure.formData = {
      bnoNo: "",
      bomCode: "",
      bomName: "",
      day1: 0,
      day10: 0,
      day11: 0,
      day12: 0,
      day13: 0,
      day14: 0,
      day15: 0,
      day16: 0,
      day17: 0,
      day18: 0,
      day19: 0,
      day2: 0,
      day20: 0,
      day21: 0,
      day22: 0,
      day23: 0,
      day24: 0,
      day25: 0,
      day26: 0,
      day27: 0,
      day28: 0,
      day29: 0,
      day3: 0,
      day30: 0,
      day31: 0,
      day4: 0,
      day5: 0,
      day6: 0,
      day7: 0,
      day8: 0,
      day9: 0,
      id: 0,
      planMonth: "",
      planStatus: 0,
      processStepId: "",
      prodOrderNo: "",
      productDeptId: "",
      productDeptName: "",
      routeId: 0,
      taskNo: "",
      taskStatus: 0,
      deviceId: ""
    };
    insertForm.value.resetFields();
    procedure.submitLoading = false;
    procedure.showEdit = false;
  });
};
// 监听月份变化  动态变化数量，控制输入框显示隐藏与禁用
const checkDay = val => {
  let mm = dateFormatYM(val).split("-"); //把2020-11变成需要传输的样子：2020和11
  let temp = new Date(mm[0] as any, mm[1] as any, 0);
  let dayNum1 = temp.getDate(); //这里mm就是天数啦
  procedure.dayNum = dayNum1;
  procedure.mouthNum = Number(mm[1]);
  if (procedure.mouthNum != procedure.monthNowNum) {
    procedure.dayNowNum = 0;
  } else {
    procedure.dayNowNum = new Date(Date.now()).getDate() - 1;
  }
};
// 查看历史
// 占用
const takeUpData = reactive({
  loading: false,
  submitLoading: false,
  selectRow: null,
  showEdit: false,
  historyData: [] as any[]
});
// 占用
const checkHistory = async (row: any) => {
  takeUpData.showEdit = true;
  queryPlanTaskHis(row.id).then((res: any) => {
    console.log(res);
    if (res.code === 0) {
      takeUpData.historyData = res.data;
    } else {
      errorMessage(res.message);
    }
  });
};
const takeUpClose = () => {
  nextTick(() => {
    takeUpData.submitLoading = false;
    takeUpData.showEdit = false;
    takeUpData.historyData = [];
  });
};
// 根据查询条件导出数据
const download = () => {
  downloadProductionSchedulingData(table.listQuery)
    .then((res: any) => {
      if (res.code == 500) {
        errorMessage(res.message);
      } else {
        const fileBlob = res;
        const fileUrl = URL.createObjectURL(fileBlob); //将blob转成url地址
        const element = document.createElement("a");
        element.setAttribute("href", fileUrl);
        element.setAttribute("downLoad", "排产计划数据.xls");
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
      }
    })
    .catch(() => {
      errorMessage("操作失败");
    });
};
const reportData = reactive({
  submitLoading: false,
  dialogShow: false,
  userData: [] as any[],
  formData: {
    id: 0,
    bnoNo: "",
    bomCode: "",
    bomName: "",
    endWorkdConfimDate: "",
    prodOrderNo: "" as any,
    taskNo: "",
    startWorkConfimDate: "",
    teamgroupName: "",
    date: "",
    planStatus: "",
    topBomCode: "" as any
  },
  formRules: {
    topBomCode: [{ required: true, message: "请输入顶级母件号" }]
  }
});
const reportShow = () => {
  reportData.dialogShow = true;
  reportData.formData.topBomCode = "";
};
const reportClose = () => {
  nextTick(() => {
    reportData.dialogShow = false;
    reportData.formData.topBomCode = "";
  });
};
// 根据查询条件导出数据
const xForm = ref({} as VxeFormInstance);
const downloadReport = async () => {
  const $form = xForm.value;
  const errMap = await $form.validate();
  if (!errMap) {
    downloadReportData({ ...reportData.formData, ...table.listQuery })
      .then((res: any) => {
        if (res.code == 500) {
          errorMessage(res.message);
        } else {
          const fileBlob = res;
          const fileUrl = URL.createObjectURL(fileBlob); //将blob转成url地址
          const element = document.createElement("a");
          element.setAttribute("href", fileUrl);
          element.setAttribute("downLoad", "排产计划.xls");
          document.body.appendChild(element);
          element.click();
          document.body.removeChild(element);
        }
      })
      .catch(() => {
        errorMessage("操作失败");
      });
  }
};

// mounted
onMounted(() => {
  nextTick(() => {
    searchEvent();
    getTeam();
    getProcess();
    queryDevice();
    table.tableHeight = changeHeight();
  });
});
</script>

<template>
  <div>
    <!-- 工具栏 -->
    <vxe-form :data="table.listQuery">
      <vxe-form-item title="销售单号">
        <template #default="{ data }">
          <vxe-input v-model="data.bnoNo" placeholder="销售单号"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="任务编号">
        <template #default="{ data }">
          <vxe-input v-model="data.taskNo" placeholder="任务编号"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="生产订单编号">
        <template #default="{ data }">
          <vxe-input
            v-model="data.prodOrderNo"
            placeholder="生产订单编号"
            @clear="clearProductOrderNo"
          ></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="计划状态" field="planStatus">
        <template #default="{ data }">
          <el-select
            size="small"
            clearable
            v-model="data.planStatus"
            placeholder="请选择计划状态"
          >
            <el-option label="未下发" :value="2"> </el-option>
            <el-option label="已下发" :value="4"> </el-option>
            <el-option label="已委外" :value="5"> </el-option>
          </el-select>
        </template>
      </vxe-form-item>
      <vxe-form-item field="bomName" title="品名">
        <template #default="{ data }">
          <vxe-input v-model="data.bomName" placeholder="品名"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="料号" field="bomCode">
        <template #default="{ data }">
          <vxe-input v-model="data.bomCode" placeholder="料号"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="班组" field="teamgroupName">
        <template #default="{ data }">
          <vxe-input
            v-model="data.teamgroupName"
            placeholder="班组"
          ></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="调整后加工时间" field="date">
        <template #default="{ data }">
          <el-date-picker
            v-model="data.date"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          ></el-date-picker>
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template #default>
          <vxe-button
            status="primary"
            icon="fa fa-search"
            v-auth="routeName + ':search'"
            @click="searchEvent"
            >查询</vxe-button
          >
          <vxe-button
            icon="fa fa-plus"
            status="primary"
            @click="insertEvent"
            v-auth="routeName + ':add'"
            >新增</vxe-button
          >
          <vxe-button
            status="primary"
            @click="issueEvent"
            :disabled="issueDisabled"
            v-auth="routeName + ':issued'"
            >下发</vxe-button
          >
          <vxe-button
            status="primary"
            v-auth="routeName + ':issued'"
            @click="transferEvent"
            >转委外</vxe-button
          >
          <vxe-button
            status="primary"
            icon="fa fa-download"
            v-auth="routeName + ':download'"
            @click="download"
            >导出数据</vxe-button
          >
          <vxe-button
            status="primary"
            icon="fa fa-download"
            v-auth="routeName + ':download'"
            @click="reportShow"
            >导出报表</vxe-button
          >
        </template>
      </vxe-form-item>
    </vxe-form>

    <!-- 列表 -->
    <vxe-table
      ref="xTable"
      class="mytable-style"
      border
      show-header-overflow
      show-overflow
      :row-config="{ isHover: true }"
      :print-config="{}"
      :export-config="{}"
      :height="table.tableHeight"
      :data="table.tableData"
    >
      <vxe-column
        type="checkbox"
        fixed="left"
        id="label"
        width="40"
      ></vxe-column>
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column field="bnoNo" title="销售单号" width="150"></vxe-column>
      <vxe-column
        field="custName"
        title="客户名称"
        min-width="150"
      ></vxe-column>
      <vxe-column
        field="teamgroupName"
        title="班组"
        min-width="150"
      ></vxe-column>
      <vxe-column field="taskNo" title="任务编号" width="110"></vxe-column>
      <vxe-column
        field="prodOrderNo"
        title="生产订单编号"
        min-width="180"
      ></vxe-column>
      <vxe-column field="planStatus" title="状态" width="100">
        <template #default="{ row }">
          <el-tag type="warning" effect="dark" v-if="row.planStatus == 2"
            >未下发</el-tag
          >
          <el-tag effect="dark" v-if="row.planStatus == 4">已下发</el-tag>
        </template>
      </vxe-column>
      <!-- 
      <vxe-column
        field="productDeptName"
        title="生产部门"
        width="80"
      ></vxe-column> -->
      <vxe-column field="bomCode" title="料号" min-width="130"></vxe-column>
      <vxe-column field="bomName" title="品名" width="340"></vxe-column>
      <!-- <vxe-column field="startWorkDate" title="加工日期" width="100">
        <template #default="{ row }">
          {{ row.startWorkDate ? row.startWorkDate.split(" ")[0] : "" }}
        </template>
      </vxe-column>
      <vxe-column field="endWorkdDate" title="完工日期" width="140">
        <template #default="{ row }">
          {{ row.endWorkdDate ? row.endWorkdDate.split(" ")[0] : "" }}
        </template>
      </vxe-column> -->
      <vxe-column field="startWorkDate" title="调整后加工日期" width="140">
        <template #default="{ row }">
          {{
            row.startWorkConfimDate ? row.startWorkConfimDate.split(" ")[0] : ""
          }}
        </template>
      </vxe-column>
      <vxe-column field="endWorkdConfimDate" title="调整后完工日期" width="140">
        <template #default="{ row }">
          {{
            row.endWorkdConfimDate ? row.endWorkdConfimDate.split(" ")[0] : ""
          }}
        </template>
      </vxe-column>
      <vxe-column field="bnoConfimNum" title="数量" width="80"></vxe-column>
      <!-- <vxe-column field="bnoConfimNum" title="生产数量" width="80"></vxe-column> -->
      <vxe-column field="planStatus" title="计划状态" width="80">
        <template #default="{ row }">
          <el-tag type="warning" v-if="row.planStatus == 1">未排产</el-tag>
          <el-tag type="success" v-if="row.planStatus == 2">已排产</el-tag>
          <!-- <el-tag type="info" v-if="row.planStatus == 3">已撤销</el-tag>
          <el-tag type="danger" v-if="row.planStatus == 4">已推送</el-tag> -->
          <el-tag type="info" v-if="row.planStatus == 5">已委外</el-tag>
        </template>
      </vxe-column>
      <vxe-column field="taskStatus" title="任务状态" width="110">
        <template #default="{ row }">
          <el-tag type="warning" effect="dark" v-if="row.taskStatus == 1"
            >未开始</el-tag
          >
          <el-tag type="success" effect="dark" v-if="row.taskStatus == 2"
            >已完成</el-tag
          >
          <el-tag type="info" effect="dark" v-if="row.taskStatus == 3"
            >暂停</el-tag
          >
          <el-tag type="danger" effect="dark" v-if="row.taskStatus == 4"
            >故障</el-tag
          >
          <el-tag type="success" effect="dark" v-if="row.taskStatus == 5"
            >进行中</el-tag
          >
          <el-tag type="danger" effect="dark" v-if="row.taskStatus == 6"
            >终止</el-tag
          >
        </template>
      </vxe-column>
      <!-- <vxe-column field="systemSource" title="系统来源"></vxe-column> -->
      <vxe-column title="操作" width="120" fixed="right">
        <template #default="{ row }">
          <vxe-button
            type="text"
            icon="fa fa-eye"
            @click="checkDetail(row.prodOrderNo)"
            v-auth="routeName + ':checkDetail'"
            >查看详情</vxe-button
          >
          <!-- @click="editEvent(row)" -->
        </template>
      </vxe-column>
    </vxe-table>
    <!-- <vxe-table
      ref="xTable"
      class="mytable-style"
      border
      show-header-overflow
      show-overflow
      :row-config="{ isHover: true }"
      :print-config="{}"
      :export-config="{}"
      :data="procedure.tableData"
    >
      <vxe-column
        type="checkbox"
        fixed="left"
        id="label"
        width="40"
      ></vxe-column>
      <vxe-column type="seq" title="序号" width="60" fixed="left"></vxe-column>
      <vxe-column
        field="bnoNo"
        title="销售单号"
        width="130"
        fixed="left"
      ></vxe-column>
      <vxe-column
        field="prodOrderNo"
        title="生产订单编号"
        width="120"
        fixed="left"
      ></vxe-column>
      <vxe-column
        field="taskNo"
        title="任务编号"
        width="100"
        fixed="left"
      ></vxe-column>
      <vxe-column
        field="bomCode"
        title="料号"
        width="110"
        fixed="left"
      ></vxe-column>
      <vxe-column
        field="routeName"
        title="工艺路线"
        width="130"
        fixed="left"
      ></vxe-column>
      <vxe-column
        field="processStepName"
        title="工序名称"
        min-width="100"
        fixed="left"
      ></vxe-column>
      <vxe-column
        field="productDeptName"
        title="生产部门"
        width="80"
        fixed="left"
      ></vxe-column>
      <vxe-column field="planStatus" title="计划状态" width="80" fixed="left">
        <template #default="{ row }">
          <el-tag type="success" v-if="row.planStatus == 2">已下发</el-tag>
          <el-tag type="warning" v-else>未下发</el-tag>
        </template>
      </vxe-column>
      <vxe-column title="任务状态" width="80" fixed="left">
        <template #default="{ row }">
          <el-tag
            type="warning"
            effect="dark"
            v-if="row.taskStatus == 1 || row.taskStatus == 0"
            >未开始</el-tag
          >
          <el-tag type="info" effect="dark" v-if="row.taskStatus == 2"
            >已完成</el-tag
          >
          <el-tag type="info" effect="dark" v-if="row.taskStatus == 3"
            >暂停</el-tag
          >
          <el-tag type="danger" effect="dark" v-if="row.taskStatus == 4"
            >故障</el-tag
          >
          <el-tag type="success" effect="dark" v-if="row.taskStatus == 5"
            >进行中</el-tag
          >
          <el-tag type="danger" effect="dark" v-if="row.taskStatus == 6"
            >终止</el-tag
          >
        </template>
      </vxe-column>
      <vxe-column
        field="planMonth"
        title="计划月份"
        width="80"
        fixed="left"
      ></vxe-column>
      <vxe-column
        v-for="item in 31"
        :field="'day' + item"
        :key="item + '号'"
        :title="item + '号'"
        width="60"
      >
        <template #default="{ row }">
          {{ row["day" + item] ? row["day" + item] : 0 }}
        </template>
      </vxe-column>
      <vxe-column title="操作" width="180" fixed="right">
        <template #default="{ row }">
          <vxe-button
            type="text"
            icon="fa fa-edit"
            @click="editEvent(row)"
            v-auth="routeName + ':edit'"
            >编辑</vxe-button
          >
          <vxe-button
            type="text"
            icon="fa fa-eye"
            @click="checkHistory(row)"
            v-auth="routeName + ':edit'"
            >变更历史</vxe-button
          >
        </template>
      </vxe-column>
    </vxe-table> -->

    <!-- 分页 -->
    <vxe-pager
      perfect
      @page-change="handlePageChange"
      v-model:current-page="page.pageNum"
      v-model:page-size="page.pageRow"
      :total="page.totalResult"
      :page-sizes="[10, 20, 50, 100, 300, 1000, 3000, 5000]"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total'
      ]"
    >
    </vxe-pager>
    <!-- 生产订单--查看详情 -->
    <el-dialog
      v-model="detailData.showEdit"
      title="查看详情"
      top="5vh"
      width="90%"
      :loading="detailData.submitLoading"
      :before-close="detailClose"
      :close-on-click-modal="false"
    >
      <el-form
        ref="insertForm"
        id="dialogForm"
        :model="detailData.showFormData"
        label-align="right"
        label-width="160"
      >
        <el-row :gutter="10">
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="bnoNo" label="销售单号">
              {{ detailData.showFormData.bnoNo }}
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="custName" label="客户名称">
              {{ detailData.showFormData.custName }}
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="taskNo" label="任务编号">
              {{ detailData.showFormData.taskNo }}
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="prodOrderNo" label="生产订单编号">
              {{ detailData.showFormData.prodOrderNo }}
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="bomCode" label="料号">
              {{ detailData.showFormData.bomCode }}
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="bomName" label="品名">
              {{ detailData.showFormData.bomName }}
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="alias" label="别名">
              {{ detailData.showFormData.alias }}
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="model" label="机型">
              {{ detailData.showFormData.model }}
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="routeName" label="工艺路线">
              {{ detailData.showFormData.routeName }}
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="productDeptName" label="生产部门">
              {{
                detailData.showFormData.length
                  ? detailData.showFormData[0].productDeptName
                  : ""
              }}
            </el-form-item>
          </el-col> -->
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="bnoConfimNum" label="数量(单位)">
              {{ detailData.showFormData.bnoConfimNum }}
              {{ detailData.showFormData.bnoConfimNum ? "(件)" : "" }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">详情</el-divider>
      </el-form>
      <!-- v-load-more.expand="{
          func: load,
          target: '.el-table__body-wrapper',
          delay: 300
        }" -->
      <el-table
        border
        ref="detailTable"
        :data="detailData.showFormData.planTaskList"
        v-loading="detailData.detailLoading"
        v-loadmore="load"
        height="500px"
        infinite-scroll-disabled="disabled"
      >
        <el-table-column
          type="index"
          width="50"
          label="序号"
          fixed
        ></el-table-column>
        <el-table-column
          prop="bomCode"
          label="料号"
          min-width="120"
          fixed="left"
        ></el-table-column>
        <el-table-column
          fixed="left"
          prop="productName"
          label="品名"
          width="300"
        ></el-table-column>
        <el-table-column
          prop="alias"
          label="别名"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="model"
          label="机型"
          width="150"
        ></el-table-column>
        <el-table-column
          label="工序名称"
          prop="processStepName"
          width="150"
          fixed="left"
        ></el-table-column>
        <el-table-column
          label="合计数量"
          prop="totalCountOfMonth"
          width="120"
        ></el-table-column>
        <el-table-column
          label="设备/班组"
          prop="deviceName"
          width="200"
          fixed="left"
        ></el-table-column>
        <el-table-column
          prop="planStatus"
          label="计划状态"
          width="90"
          fixed="left"
        >
          <template #default="{ row }">
            <el-tag type="warning" effect="dark" v-if="row.planStatus == 2"
              >未下发</el-tag
            >
            <el-tag effect="dark" v-if="row.planStatus == 4">已下发</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="任务状态" width="80" fixed="left">
          <template #default="{ row }">
            <el-tag
              type="warning"
              effect="dark"
              v-if="row.taskStatus == 1 || row.taskStatus == 0"
              >未开始</el-tag
            >
            <el-tag type="info" effect="dark" v-if="row.taskStatus == 2"
              >已完成</el-tag
            >
            <el-tag type="info" effect="dark" v-if="row.taskStatus == 3"
              >暂停</el-tag
            >
            <el-tag type="danger" effect="dark" v-if="row.taskStatus == 4"
              >故障</el-tag
            >
            <el-tag type="success" effect="dark" v-if="row.taskStatus == 5"
              >进行中</el-tag
            >
            <el-tag type="danger" effect="dark" v-if="row.taskStatus == 6"
              >终止</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="planMonth"
          label="计划月份"
          width="80"
          fixed="left"
        ></el-table-column>
        <el-table-column prop="day1" label="1号" width="80"></el-table-column>
        <el-table-column prop="day2" label="2号" width="80"> </el-table-column>
        <el-table-column prop="day3" label="3号" width="80"> </el-table-column>
        <el-table-column prop="day4" label="4号" width="80"> </el-table-column>
        <el-table-column prop="day5" label="5号" width="80"> </el-table-column>
        <el-table-column prop="day6" label="6号" width="80"> </el-table-column>
        <el-table-column prop="day7" label="7号" width="80"> </el-table-column>
        <el-table-column prop="day8" label="8号" width="80"> </el-table-column>
        <el-table-column prop="day9" label="9号" width="80"> </el-table-column>
        <el-table-column prop="day10" label="10号" width="80">
        </el-table-column>
        <el-table-column prop="day11" label="11号" width="80">
        </el-table-column>
        <el-table-column prop="day12" label="12号" width="80"></el-table-column>
        <el-table-column prop="day13" label="13号" width="80">
        </el-table-column>
        <el-table-column prop="day14" label="14号" width="80">
        </el-table-column>
        <el-table-column prop="day15" label="15号" width="80">
        </el-table-column>
        <el-table-column prop="day16" label="16号" width="80">
        </el-table-column>
        <el-table-column prop="day17" label="17号" width="80">
        </el-table-column>
        <el-table-column prop="day18" label="18号" width="80">
        </el-table-column>
        <el-table-column prop="day19" label="19号" width="80">
        </el-table-column>
        <el-table-column prop="day20" label="20号" width="80">
        </el-table-column>
        <el-table-column prop="day21" label="21号" width="80">
        </el-table-column>
        <el-table-column prop="day22" label="22号" width="80">
        </el-table-column>
        <el-table-column prop="day23" label="23号" width="80"></el-table-column>
        <el-table-column prop="day24" label="24号" width="80">
        </el-table-column>
        <el-table-column prop="day25" label="25号" width="80">
        </el-table-column>
        <el-table-column prop="day26" label="26号" width="80">
        </el-table-column>
        <el-table-column prop="day27" label="27号" width="80">
        </el-table-column>
        <el-table-column prop="day28" label="28号" width="80">
        </el-table-column>
        <el-table-column prop="day29" label="29号" width="80">
        </el-table-column>
        <el-table-column prop="day30" label="30号" width="80">
        </el-table-column>
        <el-table-column prop="day31" label="31号" width="80">
        </el-table-column>
        <!-- <el-table-column
          v-for="item in 31"
          :prop="'day' + item"
          :key="item + '号'"
          :label="item + '号'"
          width="60"
        >
          <template #default="{ row }">
            {{ row["day" + item] ? row["day" + item] : 0 }}
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button
              type="warning"
              size="mini"
              @click="editEvent(row)"
              v-auth="routeName + ':edit'"
              >编辑</el-button
            >
            <el-button
              type="warning"
              size="mini"
              @click="checkHistory(row)"
              v-auth="routeName + ':edit'"
              >变更历史</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="detailClose" size="small">取 消</el-button>
      </template>
    </el-dialog>

    <!-- 每条子订单详情弹框 -->
    <el-dialog
      v-model="procedure.showEdit"
      :title="procedure.selectRow ? '编辑&保存' : '新增&保存'"
      width="80%"
      top="5vh"
      :loading="procedure.submitLoading"
      :before-close="handleClose"
      :close-on-click-modal="false"
      v-if="procedure.showEdit"
    >
      <el-form
        ref="insertForm"
        :model="procedure.formData"
        :rules="procedure.formRules"
        label-width="120px"
      >
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="bnoNo" label="销售单号">
              <template v-if="procedure.selectRow">
                {{ procedure.formData.bnoNo }}
              </template>
              <el-input
                v-else
                v-model.trim="procedure.formData.bnoNo"
                size="small"
                placeholder="请输入销售单号"
                :readonly="procedure.selectRow ? true : false"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="prodOrderNo" label="生产订单编号">
              <template v-if="procedure.selectRow">
                {{ procedure.formData.prodOrderNo }}
              </template>

              <el-input
                v-else
                v-model.trim="procedure.formData.prodOrderNo"
                size="small"
                placeholder="请输入生产订单编号"
                :readonly="procedure.selectRow ? true : false"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="taskNo" label="任务编号">
              <template v-if="procedure.selectRow">
                {{ procedure.formData.taskNo }}
              </template>

              <el-input
                v-else
                v-model.trim="procedure.formData.taskNo"
                size="small"
                placeholder="请输入任务编号"
                :readonly="procedure.selectRow ? true : false"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="bomCode" label="料号">
              <template v-if="procedure.selectRow">
                {{ procedure.formData.bomCode }}
              </template>
              <el-input
                v-else
                v-model.trim="procedure.formData.bomCode"
                size="small"
                placeholder="请输入料号"
                :readonly="procedure.selectRow ? true : false"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="bomName" label="品名">
              <template v-if="procedure.selectRow">
                {{ procedure.formData.bomName }}
              </template>
              <el-input
                v-else
                v-model.trim="procedure.formData.bomName"
                size="small"
                placeholder="请输入品名"
                :readonly="procedure.selectRow ? true : false"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="productDeptId" label="生产部门">
              <el-select
                v-model="procedure.formData.productDeptId"
                filterable
                size="small"
                placeholder="请选择关联班组"
                style="width: 100%"
                @change="teamChange"
              >
                <el-option
                  v-for="item in procedure.teamData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="processStepId" label="工序节点">
              <el-select
                v-model="procedure.formData.processStepId"
                size="small"
                filterable
                placeholder="请选择工序"
                style="width: 100%"
                :disabled="procedure.selectRow ? true : false"
              >
                <el-option
                  v-for="item in procedure.processData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item prop="planMonth" label="计划月份">
              <el-date-picker
                v-model="procedure.formData.planMonth"
                type="month"
                size="small"
                format="YYYY年MM月"
                :clearable="false"
                placeholder="选择日期"
                :disabled-date="disabledDate"
                @change="checkDay"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="设备名称" prop="deviceId">
              <el-select
                v-model="procedure.formData.deviceId"
                filterable
                clearable
                placeholder="请选择"
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="item in table.deviceData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="合计数量">
              {{ procedure.totalCountOfMonth }}
            </el-form-item>
          </el-col>
        </el-row>
        <div class="dayList">
          <el-form-item
            v-for="item in 31"
            :key="item"
            label-width="50px"
            :prop="'day' + item"
            v-show="procedure.dayNum >= item"
          >
            <template #label>
              <div
                :style="{
                  color:
                    procedure.formData['day' + item] > 0 ? '#409EFF' : '#606266'
                }"
              >
                {{ item + "号" }}
              </div>
            </template>
            <el-input-number
              size="small"
              v-model="procedure.formData['day' + item]"
              :min="0"
              :precision="2"
              :controls="false"
              :disabled="procedure.dayNowNum < item ? false : true"
              placeholder="请输入计划数量"
            ></el-input-number>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          :disabled="procedure.submitLoading"
          @click="submitEvent"
          >确 定</el-button
        >
      </template>
    </el-dialog>
    <!-- 变更历史记录 -->
    <el-dialog
      v-model="takeUpData.showEdit"
      title="变更历史记录"
      width="80%"
      top="7vh"
      :before-close="takeUpClose"
      :close-on-click-modal="false"
    >
      <div v-if="takeUpData.historyData.length">
        <ul v-for="items in takeUpData.historyData" :key="items.uTime">
          <el-divider content-position="center">{{ items.uTime }}</el-divider>
          <li v-for="item in items.items" :key="item.id">
            <p>
              {{ item.uField }}：&nbsp;&nbsp;{{
                item.oldValue
              }}&nbsp;-&gt;&nbsp;{{ item.newValue }}
            </p>
          </li>
        </ul>
      </div>
      <div v-else>
        <p style="text-align: center">暂无变更数据</p>
      </div>
      <template #footer>
        <vxe-button @click="takeUpClose">取 消</vxe-button>
      </template>
    </el-dialog>
    <!-- 指派弹框 -->
    <vxe-modal
      v-model="reportData.dialogShow"
      title="导出报表"
      width="500"
      height="200"
      max-height="300"
      resize
      showFooter
      destroy-on-close
      @close="handleClose"
    >
      <template #default>
        <vxe-form
          ref="xForm"
          :data="reportData.formData"
          :rules="reportData.formRules"
          title-align="right"
          title-width="100"
        >
          <vxe-form-item
            field="topBomCode"
            title="顶级母件号"
            :span="24"
            :item-render="{}"
          >
            <template #default="{ data }">
              <el-input
                v-model="data.topBomCode"
                placeholder="请输入顶级母件号"
                style="width: 100%"
                size="small"
              ></el-input>
            </template>
          </vxe-form-item>
        </vxe-form>
      </template>
      <template #footer>
        <vxe-button @click="reportClose">取 消</vxe-button>
        <vxe-button status="primary" @click="downloadReport">确 定</vxe-button>
      </template>
    </vxe-modal>
  </div>
</template>
<style scoped>
:deep(.el-dialog) {
  height: 89%;
  overflow: hidden;
}
:deep(.el-dialog__body) {
  position: absolute;
  left: 0;
  top: 54px;
  bottom: 60px;
  right: 0;
  z-index: 1;
  overflow: hidden;
  overflow-y: auto;
  padding: 10px 20px;
}
:deep(.el-dialog__footer) {
  position: absolute;
  bottom: 3px;
  right: 0;
}
:deep(.btnClass) {
  color: rgb(64, 158, 255);
  font-weight: bold;
}
:deep(.menuClass) {
  color: #606266;
  font-weight: bold;
}
.el-input-number {
  width: 100% !important;
}
:deep(#dialogForm .el-form-item) {
  margin-bottom: 0;
}
</style>
<style>
.mytable-style .vxe-body--column.col-blue {
  background-color: #60b8ff;
  color: #fff;
}
.mytable-style .vxe-body--column.col-orange {
  background-color: #f56c6c;
  color: #fff;
}
</style>
<style lang="scss" scoped>
.vxe-input + .vxe-button,
.vxe-input + .vxe-button--dropdown,
.vxe-button + .vxe-button,
.vxe-button + .vxe-button--dropdown {
  margin-left: 0;
}

.vxe-toolbar.size--medium {
  padding: 10px;
}

.vxe-table--render-default.size--medium {
  margin-top: 12px;
}

.vxe-button.size--medium.type--button {
  margin-left: 1em;
  height: 32px;
}

.text-model {
  &:hover {
    cursor: pointer;
  }
}
.dayList {
  display: flex;
  flex-wrap: wrap;
  > div {
    width: calc(20% - 10px);
    margin: 8px 5px;
    text-align: center;
  }
}
.mobile {
  .dayList {
    display: flex;
    flex-wrap: wrap;
    > div {
      width: calc(50% - 10px);
      margin: 8px 5px;
      text-align: center;
    }
  }
}

.el-date-editor.el-input__inner,
.el-form-item :deep(.el-date-editor.el-input),
.el-select {
  width: 100% !important;
}
</style>
